//设置baseURL
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'
// 获取图书
const tb = document.querySelector('#tb')

//获取元素
const bookname = document.querySelector('[name="bookname"]')
const author = document.querySelector('[name="author"]')
const publisher = document.querySelector('[name="publisher"]')
// 调取接口
const getCookie = () => {
  axios({
    method: 'get',
    url: '/api/getbooks',
  }).then((res) => {
    // console.log(res.data.data)
    res.data.data.sort((a,b)=>a.id-b.id)
    // 渲染数据
    let htmlTr = ''
    res.data.data.forEach( (item)=> {
      const { id, bookname, author, publisher } = item
      htmlTr += `
      <tr>
        <td>${id}</td>
        <td>${bookname}</td>
        <td>${author}</td>
        <td>${publisher}</td>
        <td> <a href="javascript:;"data-id=${id}>删除</a></td>
      </tr>
      `
    })
    // const htmlTr = res.data.data.map((item) => {
    //   const { id, bookname, author, publisher } = item
    //   return `
    //   <tr>
    //     <td>${id}</td>
    //     <td>${bookname}</td>
    //     <td>${author}</td>
    //     <td>${publisher}</td>
    //     <td> <a href="javascript:;"data-id=${id}>删除</a></td>
    //   </tr>
      
    //   `
    // })
    // 放在tb中
    // tb.innerHTML = htmlTr.join('')
    tb.innerHTML = htmlTr
  })
}
getCookie()

// 2 新增功能
//

document.querySelector('#bookForm').onsubmit = (e) => {
  // 阻止默认行为
  e.preventDefault()
  // 非空判断
  if (bookname.value === '' || author.value === '' || publisher.value === '') {
    alert('啥也不填,你想干什么')
    return
  }
  // 快速得到data
  const data = serialize(document.querySelector('#bookForm'), { hash: true })
  // 新增接口
  axios({
    url: '/api/addbook',
    method: 'post',
    data,
  }).then((res) => {
    console.log(res)
    if (res.status === 201) {
      alert('添加成功')
    }
    // 清空表单
    document.querySelector('#bookForm').reset()
    // 重新调取 获取列表
    getCookie()
  })
}
// 添加删除事件
//

tb.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    const id = e.target.dataset.id
    // 调删除接口
    axios({
      url: `http://ajax-api.itheima.net/api/books`,
      method: 'get',
      params: {
        id,
      }
    }).then((res) => {
      // console.log(res)
      alert('删除成功')
      getCookie()
    })
  }
})


